import Component from '@teld/q-components/Fab';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { defineComponent, onMounted, ref, toRaw } from 'vue';
import FabAction from './FabAction';
import styles from './index.module.scss';
import './index.scss';

export * from '@teld/q-components/Fab';

export default defineComponent({
  name: fixNameSpace(Component.name),
  props: {
    ...commonProps,
    ...Component.props,
    staticItems: {
      type: Array,
      default() {
        return [];
      },
    },
    draggable: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  emits: ['fab-item-click'],

  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props);
    const { default: defaultSlot } = slots;

    expose(mappingExpose);
    onMounted(() => {});

    function onClickHandler(params) {}

    function fabItemsClick(item) {
      emit('fab-item-click', toRaw(item));
    }
    function moveFab(ev) {
      //不生效
      console.log(1);
    }
    return () => {
      return (
        <Component
          ref={refComponent}
          {...attrs}
          {...pickOwnForBasicComponent(mappingProps, Component.props, attrs)}
          class={['t-fab', styles.module]}
          v-show={mappingProps.visible}
          v-touch-pan={{
            handler: moveFab,
            modifiers: {
              prevent: true,
              mouse: true,
            },
          }}
          // v-slots={{ ...slots }}
        >
          {defaultSlot?.() ??
            mappingProps.staticItems.map((item, index) => (
              <FabAction
                color={item.color}
                icon={item.icon}
                onClick={() => fabItemsClick(item)}
              />
            ))}
        </Component>
      );
    };
  },
});
